<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			body {
				max-width: 500px;
			}

			img {
				float: left;
				margin: 10px;
			}
		</style>
	</head>
	
	<!-- 
	浮动之前： 文字 和图片 显示 都是 很正常，图片比文字 大很多。所以 文字 和图片 都在一行，图片 把一行的 撑起来了， 文字还是在基线的位置 并没有动。 
	
	 浮动之后：， img ，可以被文字包围起来了。 图片脱离了原来的文档流，不再被视为文字 ，这样 文字就可以轻松 围住图片。
	 
	 
	 最初的设计 浮动用来 帮助图文混排，后来浮动 可以应用到各种元素上，从而变成了一种布局方式，灵活。
	 
	 -->
	<body>


		<img src="https://public.biaoyansu.com/logo-sm.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quaerat blanditiis praesentium quibusdam
		placeat consequuntur tempora dolor delectus illum ab qui veritatis omnis nihil temporibus provident nemo ea
		molestias quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam commodi eius quam minima aliquid voluptatum quo praesentium repudiandae itaque rerum iste vitae reprehenderit sapiente amet voluptas? Pariatur itaque sapiente ipsum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quidem reprehenderit quibusdam saepe libero ipsum et eum deserunt dolores illum. Harum aperiam nihil neque vero dolorum quae error maiores aspernatur.
	</body>
</html>
